<template>
  <transition name="fade">
    <div class="xrk-selector" v-show="visible">
      <transition name="upDown">
        <div class="selector-contnet" v-show="visible">
          <div class="selector-header">
            <div class="selector-top">
              <h3 class="selector-title">请选择所在地区</h3>
              <div class="selector-close" @click="onClose"></div>
            </div>
            <city-tabs
              :current-city="cityHeadTabs"
              :city-head-tabs-index="cityHeadTabsIndex"
              @checkIndex="onChangeCityTabs"
            ></city-tabs>
          </div>
          <div class="selector-main">
            <div
              class="main-all"
              v-for="(citys, index) in currentCityList"
              :key="index"
              :class="{ 'animation-left': cityHeadTabsIndex >= index }"
            >
              <hot-city
                :cityList="cityList"
                @checkHotCity="onChceHotCity"
                v-if="index === 0"
              >
              </hot-city>
              <city-list
                :list="citys"
                :city-head-tabs="cityHeadTabs"
                :current-type="currentType"
                @changeCityList="onChangeCityList"
                @submit="submit"
              >
              </city-list>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>
<script>

import indexJs from "./index";
export default indexJs;
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>